<template>
  <div class="container details">
    <router-link to="/" class="btn btn-success">返回</router-link>
    <h1 class="page-header">
      {{customer.name}}
      <span class="pull-right">
        <router-link class="btn btn-primary" :to="'/edit/' + customer.id">编辑</router-link>
        <button type="button" class="btn btn-danger" @click="deleteCustomer(customer.id)">删除</button>
      </span>
    </h1>
    <ul class="list-group">
      <li class="list-group-item">
        <span class="glyphicon glyphicon-earphone">{{customer.phone}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-envelope">{{customer.email}}</span>
      </li>
    </ul>
    <ul class="list-group">
      <li class="list-group-item">
        <span class="glyphicon glyphicon-bookmark">{{customer.education}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-leaf">{{customer.graduationschool}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-fire">{{customer.profession}}</span>
      </li>
      <li class="list-group-item">
        <span class="glyphicon glyphicon-magnet">{{customer.profile}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Details',
  data () {
    return {
      customer: ''
    }
  },
  methods: {
    getCustomer (id) {
      this.axios.get('/api/users/' + id)
        .then((res) => {
          const data = res.data
          console.log(data)
          this.customer = data
        })
    },
    deleteCustomer (id) {
      alert(id)
      this.axios.delete('/api/users/' + id)
        .then(() => {
          this.$router.push({path: '/home', query: {alert: '用户删除成功！'}})
        })
    }
  },
  created () { // 进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
    this.getCustomer(this.$route.params.id)
  }
  // watch: {
  //   '$route' (to, from) {
  //     if (this.$route.params.id) {
  //       this.getCustomer(this.$route.params.id)
  //     }
  //   }
  // }
}
</script>

<style lang="stylus" scoped>
  .btn-primary
    margin-right 20px
</style>
